<html layout:decorate="~{alarm/alarm_layout}" xmlns:layout="http://www.w3.org/1999/xhtml">
<body>
<div layout:fragment="content_alarm">
    <div class="search_condition_block" id="btn">
        <div style="margin-top: 5px ">
            <label style="width: 80px;margin-left: 15px">时&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;间:</label>
            <div id="time" class="btn-group btn-group-sm" role="group" aria-label="...">
                <button type="button" class="btn btn-success active" name="createTime">今天</button>
                <button type="button" class="btn btn-success" name="yestoday">昨天</button>
                <button type="button" class="btn btn-success" name="week">本周</button>
                <button type="button" class="btn btn-success" name="month">本月</button>
                <button type="button" class="btn btn-success" delay="false">自定义</button>
                <div style="display: inline-block" id="time_select">
                    <input class="form_date"
                           style="height: 30px; background-color: white !important; border-radius: 5px !important"
                           type="text" placeholder="开始时间"
                           id="start_time_select" data-link-field="start_time" data-link-format="yyyy-mm-dd"
                           readonly>
                    <span>至</span>
                    <input class="form_date"
                           style="height: 30px; background-color: white !important; border-radius: 5px !important"
                           type="text" placeholder="结束时间"
                           id="end_time_select" data-link-field="end_time" data-link-format="yyyy-mm-dd"
                           readonly>
                    <input type="hidden" id="start_time" name="start_time">
                    <input type="hidden" id="end_time" name="end_time">
                </div>
            </div>
                <input type="text" class="search-data-child" name="Q_LIKE_equipmentName" placeholder="搜索设备名称"
                   style="margin-left: 10px">
            <button type="button" delay="false" id="search-btn"  class="btn btn-primary btn-sm"
                    style="margin-left: 10px">搜索<!--onclick="alarmSearch('dataTable')"-->
            </button>
        </div>

        <div style="margin-top: 5px">
            <label style="width: 80px;margin-left: 15px">报警等级:</label>
            <div id="grade" class="btn-group btn-group-sm" role="toolbar" aria-label="...">
                <button type="button" class="btn btn-success active" name="rank">所有</button>
                <button type="button" class="btn btn-success" name="four">四级</button>
                <button type="button" class="btn btn-success" name="three">三级</button>
                <button type="button" class="btn btn-success" name="two">二级</button>
                <button type="button" class="btn btn-success" name="one">一级</button>
            </div>

            <label style="width: 80px;margin-left: 15px">报警状态:</label>
            <div id="status" class="btn-group btn-group-sm" role="group" aria-label="...">
                <button type="button" class="btn btn-success active" name="status">全部</button>
                <button type="button" class="btn btn-success"  name="unconfirm">未确认</button>
                <button type="button" class="btn btn-success"  name="affirm">已确认未处理</button>
                <button type="button" class="btn btn-success"  name="processed">已处理</button>
                <button type="button" class="btn btn-success"  name="destroy">已作废</button>
            </div>

            <label style="width: 80px;margin-left: 15px">报警来源:</label>
            <div id="source" class="btn-group btn-group-sm" role="group" aria-label="...">
                <button type="button" class="btn btn-success active" name="source">所有</button>
                <button type="button" class="btn btn-success"  name="BMS">BMS</button>
                <button type="button" class="btn btn-success"  name="PCS">PCS</button>
                <button type="button" class="btn btn-success"  name="diagnose">诊断</button>
            </div>
        </div>
    </div>

    <div class="main-body">

            <table id="dataTable" data-url="alarm_data" data-page-list=[] data-striped="true" data-pagination="true"
                   data-page-size="15" data-cache="false">
            </table>

    </div>


    <style>
        .btn-group-sm .active {
            background-color: #006dcc !important;
            border-color: #006dcc !important;
        }
    </style>
    <script>
        /*筛选按钮*/
        var startTime, endTime;
        /*自定义时间筛选*/
        $("#start_time_select").datetimepicker({
            bootcssVer: 3,   //设置读取bootstrap3，否则默认读取bootstrap2，左右箭头会不见
            startView: 2,
            format: "yyyy-mm-dd",
            minView: "month",
            todayBtn: "linked",
            todayHighlight: true,
            language: "zh-CN",
            showMeridian: true,
            autoclose: true,
            endDate: new Date()
        }).on('changeDate', function (ev) {
            var starttime = $("#start_time_select").val();
            startTime = starttime;
            $("#end_time_select").datetimepicker('setStartDate', starttime);
        });

        $("#end_time_select").datetimepicker({
            bootcssVer: 3,   //设置读取bootstrap3，否则默认读取bootstrap2，左右箭头会不见
            startView: 2,
            format: "yyyy-mm-dd",
            minView: "month",
            todayBtn: "linked",
            todayHighlight: true,
            language: "zh-CN",
            autoclose: true,
            showMeridian: true,
            endDate: new Date()
        }).on('changeDate', function (ev) {
            var endtime = $("#end_time_select").val();
            endTime = endtime;
            $("#start_time_select").datetimepicker('setEndDate', endtime);
            // console.log(startTime + endTime)

            if (startTime && endTime != null) {
                var condition = [];
                condition.push(startTime);
                condition.push(endtime);
                var url = "/alarm/condition_query";
                $("button.active").each(function () {
                    condition.push($(this).attr("name"))
                });
                console.log(condition)
                $("#dataTable").bootstrapTable('refresh', {url: url + "?condition=" + condition});
            }


        });

        $("#system_start_time").datetimepicker({
            bootcssVer: 3,   //设置读取bootstrap3，否则默认读取bootstrap2，左右箭头会不见
            startView: 2,
            format: "yyyy-mm-dd",
            minView: "month",
            todayBtn: "linked",
            todayHighlight: true,
            language: "zh-CN",
            autoclose: true,
            showMeridian: true
        });
        $("#time_select").hide();

        $('.search_condition_block .btn-group-sm button').click(function (e) {
            $(this).addClass('active').siblings().removeClass('active');
            if ($(this).parent().attr('id') == 'time' && ($(this).val() == null || $(this).val() == '') && $(this).text() == '自定义') {
                $("#time_select").show();
                $("#start_time_select").val('');
                $("#end_time_select").val('');
            } else {
                $("#time_select").hide();
                $('#dataTable').bootstrapTable('refreshOptions', {pageNumber: 1});
            }
        });
        $('#search-btn').click(function (e) {
            $('#dataTable').bootstrapTable('refreshOptions', {pageNumber: 1});
        });
        /**********************按钮活跃********************************/
        $('#time button').click(function (e) {
            $(this).addClass('active').siblings().removeClass('active');
        });

        $('#grade button').click(function (e) {
            $(this).addClass('active').siblings().removeClass('active');
        });

        $('#status button').click(function (e) {
            $(this).addClass('active').siblings().removeClass('active');
        });

        $('#source button').click(function (e) {
            $(this).addClass('active').siblings().removeClass('active');
        });

        //table字段
        var dataFormat = [{
            field: 'id',
            title: 'id',
            visible: false
        }, {
            field: 'createTime',
            title: '开始时间',
            align: 'center',
            formatter: function (value, row, index) {
                return formatTimeStrap(value);
            }
        }, {
            field: 'operateTime',
            title: '结束时间',
            align: 'center',
            formatter: function (value, row, index) {
                return formatTimeStrap(value);
            }
        }, {
            field: 'equipmentName',
            title: '报警设备',
            align: 'center'
        }, {
            field: 'alarmContent',
            title: '报警内容',
            align: 'center'
        }, {
            field: 'alarmLev',
            align: 'center',
            title: '报警等级',
            formatter: formatLev
        }, {
            field: 'source',
            align: 'center',
            title: '来源'
        }, {
            field: 'alarmLev',
            align: 'center',
            title: '事件记录(SOE)',
            formatter: formatEventLog
        }, {
            field: 'dealIdea',
            align: 'center',
            title: '建议处理意见'
        }, {
            field: 'state',
            align: 'center',
            title: '状态',
            formatter: formatState
        }, {
            field: 'state',
            align: 'center',
            title: '操作',
            formatter: formatOperate
        }, {
            field: 'operateContent',
            align: 'center',
            title: '历史记录',
            formatter: formatDetails
        }];

        function formatLev(value, row, index) {
            if (value == 0) {
                return "无告警";
            } else if (value == 1) {
                return "一级告警"
            } else if (value == 2) {
                return "二级告警"
            } else if (value == 3) {
                return "三级告警"
            } else if (value == 4) {
                return "四级告警"
            } else {
                return ['<span>未定义告警等级-</span>'] + value
            }
        }

        function formatState(value, row, index) {
            if (value == 1) {
                return "";
            }
            if (value == 2) {
                return "已确认未处理";
            }
            if (value == 3) {
                return "已处理并作废";
            }
        }

        function formatOperate(value, row, index) {

            if (value == 1) {
                return ['<button  type="button" style="background: #F9A021"' +
                ' onclick = "operator(' + row.state + ', \'' + row.id + '\')">确认</button>']
            }
            if (value == 2) {

                return ['<button id="clBtn" type="button" style="background: #DD5A43" ' +
                'onclick = "operate(' + row.state + ', \'' + row.id + '\')">处理</button>']
            }
            if (value == 3) {
                return ['<button  type="button" style="background: #00BE67" ' +
                'onclick="javascript:void(0)">作废</rem></button>']
            }
        }

        //初始化table
        window.onload = function () {
            getTable("search-data-child", dataFormat, "dataTable");
        };

        /*********************************************事件记录详情**************************************************/
        function formatEventLog(value, row, index) {
            if (value == 1 || value == 2 || value == 3 || value == 4) {
                return ['<a onclick="showDetail(\'' + row.id + '\');">详细</a>'].join('');
            } else {
                return "";
            }

        }

        function showDetail(id) {

            /*debugger;*/
            var url = "/alarm/event_detail";
            if (id) {
                url += "?id=" + id;
            }

            $("#modal").modal({
                remote: url
            });
        }

        /***********************************************报警历史记录**************************************************/
        function formatDetails(value, row, index) {
            if (row.state == 3) {
                /*只有作废后才有相应的历史记录*/
                return ['<a onclick="showHistory(\'' + row.id + '\');">详细</a>'].join('');
            } else {
                return "";
            }
        }
        function showHistory(id) {
            /*debugger;*/
            var url = "/alarm/history_detail";
            if (id) {
                url += "?id=" + id;
            }

            $("#modal").modal({
                remote: url
            });
        }

        /**************************************************按钮模态框***************************************************/
        // 处理
        function operate(state, id) {
            //使用异步修改状态
            var url = "/alarm/alter_state";
            $.ajax({
                url: url,
                data: {"id": id},
                type: "post",
                success: function (data) {
                    $("#dataTable").bootstrapTable('refresh', {url: 'alarm_data'});
                }
            });
            var dispose = document.getElementById("clBtn");
            dispose.innerText = "作废"//改变字体
            dispose.style.backgroundColor = "#00BE67";//改变颜色
        }

        //确认模态
        function operator(state, id) {
            var url = "/alarm/operatorAffirm_detail";
            if (id) {
                url += "?id=" + id + "&state=" + state;
            }
            /* debugger;*/
            $("#modal").modal({
                remote: url
            });
        }

/**************************************************搜索设备&筛选按钮***************************************************/
        function getTable(searchClass, dataFormat, id) {
            $("#" + id).bootstrapTable({
                method: "get",
                sidePagination: "server",
                dataType: "json",
                queryParams: function queryParams(params) {   //设置查询参数
                    var condition = [];
                    var url = "/alarm/condition_query";
                    var param = {
                        pageNum: params.offset / params.limit

                    };
                    //添加input框中值
                    $("." + searchClass).each(function () {
                        var key = $(this).attr("name");
                        var val = $(this).val();
                        param[key] = val;
                    });

                    $("#btn button:not([delay='false'])").unbind("click").bind("click",function () {

                        //绑定动态按钮
                        $(this).addClass('active').siblings().removeClass('active');
                        //alert("2222")
                         condition.splice(0,condition.length);
                         //获取input框中的值
                         var start = $("#start_time_select").val();

                         if(start != ""){
                            condition.push(start);
                         }
                         var end = $("#end_time_select").val();

                         if(end != ""){
                            condition.push(end);
                         }
                        // 定义数组用于装筛选条件
                        $("button.active").each(function () {
                            condition.push($(this).attr("name"))
                        });
                        console.log(condition)
                        $("#" + id).bootstrapTable('refresh', {url: url + "?condition=" + condition});

                        return condition;
                    });

                    return param;
                },
                columns: dataFormat
            });
        }

       $("#search-btn").unbind("click").bind("click",function () {
           $("#dataTable").bootstrapTable("selectPage", 1);
       })

    </script>
</div>
</body>
</html>